<template>
<div class="order">
        <Return2>提交订单</Return2>
        <div class="orderBox">
            



             <van-swipe-cell v-for="(item, i) in $store.state.car.carList.filter(function(item){return item.isCheck==true})" :key="i">
               <van-card
                 :num="item.buyNum"
                 :price="item.price*item.buyNum"
                 :title="item.name"
                 class="goods-card"
                 :thumb="item.img"
               />
               <template #right>
                 <van-button square text="删除" type="danger"              class="delete-button"
                 @click="del(item.id)" />
               </template>
             </van-swipe-cell>

        <div class="count">
          <span>商品总金额</span>
          <span>¥{{total}}</span>
        </div>

        </div>

        

        <div class="clear">
      <div class="btn">合计：<span class="money">¥{{total}}</span></div>
      <div class="add">去结算</div>
    </div>

    </div>
</template>
<script>


import Return2 from "../components/Return2"
import { getAddress} from "../api/address";

    export default {
      components:{
        Return2
      },
        data() {
    return {
      value: '',
      date: '',
      show: false,
      commodity:{}
    };
  },
  computed: {
    total() {
      return this.$store.state.car.carList.filter(function(item){return item.isCheck==true}).reduce(
        (a, b) => (a+=b.price*b.buyNum),
        0
      );
    },
  },
  methods: {
     formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    del(id){
       this.$store.commit("DEL_CARLIST",id); 
    },
  },
  mounted() {
    getAddress(this.$route.params.id)
      .then((res) => {
        this.commodity = res.data;
      })
  },
    }
</script>
<style scoped>
.order{
    display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.orderBox{
    height: 100%;
}
.goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
  .clear{
    width: 100%;
    height: 48px;
    display: flex;
    text-align: center;
    line-height: 48px;
}
.clear .btn{
    text-align-last: left;
    flex: 3;
    background-color: rgba(224, 224, 224, 1);
    padding-left: 7%;
    font-size: 12px;
}
.clear .btn .money{
    font-size: 14px;
    color: rgba(255, 85, 26, 1);
}
.clear .add{
    flex: 1;
    background-color: rgba(255, 85, 26, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
}
.count{
  padding: 2% 5%;
  display: flex;
  justify-content: space-between;
}
</style>